<template>
  <div class="home">
    <!-- 1. 轮播图 -->
    <section class="carousel-section">
      <img
        class="carousel-section"
        src="https://20560495.s61i.faiusr.com/2/AD0I7-TmCRACGAAg3_-07AUo0qi28QIwgA84rAI.jpg.webp"
        alt=""
      />
    </section>
    <section class="contact-section">
      <div class="contact">
        <div class="contact-title">
          <div class="link">
            <span style="color: #000">联系我们</span>
            <span style="color: #a8a8a8a8">Contact us</span>
          </div>
          <div class="foms">
            <span>联系QQ：177488228</span>
            <span>手机号码：13000000000</span>
            <span>联系邮箱：XX.X@COM</span>
            <span>联系电话：020-000000 000-000000</span>
            <span>联系地址：XXX省XXX市XXX县XXX路XXX号</span>
          </div>
        </div>
        <div id="mapContainer" ref="mapContainer"></div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const mapContainer = ref<HTMLElement | null>(null)

// 公司信息
const companyInfo = {
  address: '旭博美集团综合楼',
  position: {
    lng: 106.66069,
    lat: 26.74834,
  },
}

onMounted(() => {
  // 等待百度地图API加载完成
  const initMap = () => {
    if (!mapContainer.value) {
      console.error('地图容器未找到')
      return
    }

    // 确保BMap对象存在
    if (typeof BMap === 'undefined') {
      console.log('等待百度地图API加载...')
      setTimeout(initMap, 300)
      return
    }

    try {
      // 创建地图实例
      const map = new BMap.Map(mapContainer.value)

      // 创建点坐标
      const point = new BMap.Point(
        companyInfo.position.lng,
        companyInfo.position.lat,
      )

      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 17)

      // 添加地图控件
      map.addControl(new BMap.NavigationControl()) // 添加平移缩放控件
      map.addControl(new BMap.ScaleControl()) // 添加比例尺控件
      map.addControl(new BMap.OverviewMapControl()) // 添加缩略地图控件
      map.enableScrollWheelZoom() // 启用滚轮放大缩小

      // 创建标注
      const marker = new BMap.Marker(point)
      map.addOverlay(marker)

      // 创建信息窗口
      const infoWindow = new BMap.InfoWindow(
        `
        <div style="padding: 8px;">
          <p style="margin: 0;font-size:12px;line-height:1.5;">${companyInfo.address}</p>
        </div>
      `,
        {
          width: 100,
          height: 40,
          title: '公司地址',
        },
      )

      // 点击标注显示信息窗口
      marker.addEventListener('click', () => {
        map.openInfoWindow(infoWindow, point)
      })

      // 默认打开信息窗口
      map.openInfoWindow(infoWindow, point)

      console.log('地图初始化成功')
    } catch (error) {
      console.error('地图初始化失败:', error)
    }
  }

  // 开始初始化地图
  initMap()
})
</script>

<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

section {
  background-color: #ffffff;
}

.carousel-section {
  width: 100%;
  height: 300px;
  padding: 0;
}

.image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.contact-section {
  display: flex;
  width: 100%;
  flex: 1;
  padding: 40px;
}

.contact {
  display: flex;
  width: 100%;
  min-height: 500px;
  gap: 20px;

  .contact-title {
    // flex: 0 0 300px;

    padding: 20px;
    .link {
      display: flex;
      gap: 10px;
      margin-bottom: 30px;
      span {
        font-size: 24px;
        &:first-child {
          font-weight: bold;
        }
      }
    }
    .foms {
      display: flex;
      flex-direction: column;
      gap: 20px;
      span {
        color: #666;
        font-size: 16px;
      }
    }
  }

  #mapContainer {
    flex: 1;
    min-height: 500px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
}
</style>
